<template>
  <el-cascader
    v-model="xzqhs"
    :options="xzqhOptions"
    :props="{ checkStrictly: true }"
    clearable
    placeholder="请选择行政区划"
    @change="handleChangeXzqh"
  ></el-cascader>
</template>

<script>
import axios from "axios";
import Graphic from "@arcgis/core/Graphic";
import { mapGetters } from "vuex";
export default {
  props: {
    mapview: { default: () => {} },
  },
  data() {
    return {
      xzqhs: [],
      // 行政区划下拉列表绑定选项
      xzqhOptions: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        objname: undefined,
        objcode: undefined,
        type: undefined,
        type_m: undefined,
        type_s: undefined,
        suosjd: undefined,
        suossq: undefined,
        geometry: null,
      },
      selectedGraphic: null,
    };
  },
  computed: {
    ...mapGetters("mapStore", ["xzqhFeatureLayer"]),
  },
  created() {
    let _self = this;
    // this.getGusmm();
    // if (_self.xzqhOptions == null) {
    //   axios.get("/config/city.json").then((res) => {
    //     _self.xzqhOptions = res.data;
    //   });
    // }
    _self.xzqhOptions = city;
  },
  methods: {
    // 行政区划选择
    handleChangeXzqh(value) {
      let _self = this;
      // 清空上一次的选择内容
      _self.queryParams.suosjd = null;
      _self.queryParams.suossq = null;
      let selectXzqh = null;
      // console.log(value);
      if (value.length == 1) {
        _self.queryParams.suosjd = value[0];
        selectXzqh = value[0];
      } else {
        _self.queryParams.suossq = value[1];
        selectXzqh = value[1];
      }
      // 定位到选定行政区域

      const queryParams = {
        where: `name='${selectXzqh}'`, // 通过选择元素进行设置
        returnGeometry: true,
      };

      _self.xzqhFeatureLayer
        .queryFeatures(queryParams)
        .then((results) => {
          console.log("Feature count: " + results.features.length);
          if (results.features.length > 0)
            _self.handleLocate(results.features[0]);
        })
        .catch((error) => {
          console.log(error.error);
        });

      // 给父组件传值
      _self.$emit("change", value);
    },

    /** 定位按钮操作 */
    handleLocate(feature) {
      let _self = this;
      if (feature) {
        _self.mapview
          .goTo(feature.geometry.extent.expand(1))
          //   .then(() => {
          //     _self.mapView.openPopup({
          //       features: [result],
          //       location: result.geometry.centroid,
          //     });
          //   })
          .catch((error) => {
            if (error.name != "AbortError") {
              console.error(error);
            }
          });
        if (_self.selectedGraphic != null)
          _self.mapview.graphics.remove(_self.selectedGraphic);
        _self.selectedGraphic = new Graphic({
          geometry: feature.geometry,
          symbol: _self.xzqhFeatureLayer.symbol,
          // {
          //   type: "simple-fill",
          //   color: [20, 130, 200, 0.5],
          //   outline: {
          //     color: [0, 255, 255],
          //     width: 2,
          //   },
          // },
        });
        _self.mapview.graphics.add(_self.selectedGraphic);
      }
    },
  },
};
</script>

<style lang="scss">
//element-ui Cascader 级联选择器 点击label选中
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: -10px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden; //隐藏单选框，不隐藏就不用设置
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>
